<template>
<div id="allcourse">
    <!--进行课程删选的部分-->
    <selectOP :courses='courses' v-on:getCoursesD='getCoursesD'  v-on:getCoursesS='getCoursesS'></selectOP>
  <!-- 总体课程详情的页面 -->
  <section class='allcoursewrapper'> 
      <ul v-if = "courses.length != 0">
            <router-link :to="{ name:'course_detail',params:{id:course.id!=null?course.id:1}, query:{date:$route.query.date!=null?$route.query.date : getDate,flagaddBtn:true}}"
                          tag="li"
                          v-for="(course, index) in courses"
                          :key="index"
                         class="wrapper">
              
              <div class="item" :style="{ backgroundImage: 'url(' + course.image + ')' }">
               <div class="bgwrapper"></div>
                <div class="text">
                      <span class="title">{{course.name}}</span>
                      <div class="middle">
                        <span >时间：{{ course.duration }}</span>
                        <span v-if='getUserInfo.weight == 0 && getUserInfo.height == 0'>总消耗：{{course.kcal}}千卡</span>
                        <span v-else>总消耗：{{(course.dynamicKcal)}}千卡</span>
                      </div>
                  </div>
              </div>
            </router-link>
      </ul>
      <span v-else class="noCourse">暂时没有此类课程哦</span>
  </section>
  <div class="upNow" @click='scrollHeight'>
        <div class="item item-upNow">
            <div class="wrapper">
                 <div class='img' :style="'background-image: url('+$qiniu.url+'assets/img/upNow.png)'"></div>
            </div>
        </div>
  </div>
  <Loading v-if="LoadingShow"></Loading>
</div>
</template>
<script>
    import Loading from '../loading';
    import selectOP from './selectoption.vue';
    import {
        refreshTitle,
        getToday,
    } from "../../tools.js";
    import api from '../../api';
    export default {
        components: {
            Loading,
            selectOP,
        },
        data() {
            return {
                courses: [],
            }
        },
        computed: {
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            getDate() {
                var date = getToday(new Date()).year + '-' + getToday(new Date()).month + '-' + getToday(new Date()).day;
                return date;
            },
            getUserInfo() {
                return this.$store.state.user
            },
        },
        created() {
            refreshTitle(this.$route.meta.title);
        },
        methods: {
            // 删选课程
            getCoursesD: function(val) {
                this.courses = val;
            },
            getCoursesS: function(val) {
                this.courses = val;
            },
            // 获取本地实际的日期
            getDay() {
                return getToday(new Date()).year + '-' + getToday(new Date()).month + '-' + getToday(new Date()).day
            },
            scroll() {
                var upNow = document.querySelector('.upNow');
                if (upNow) {
                    if (document.body.scrollTop > 600) {
                        // 显示
                        upNow.style.display = 'block';
                    } else {
                        upNow.style.display = 'none';
                    }
                    return;
                }

            },
            scrollHeight() {
                var oTop = document.body.scrollTop || document.documentElement.scrollTop;
                if (oTop > 0) {
                    document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                    var timer = requestAnimationFrame(this.scrollHeight);
                } else {
                    cancelAnimationFrame(timer);
                }
            }
        },
        mounted() {
            this.$nextTick(function() {
                window.onscroll = this.scroll;
            })

        },
    }
</script>
<style lang="css">
    #allcourse {
        /*遮罩层的样式*/
        .allcoursewrapper {
            margin-top: 40px;
        }
        .bgwrapper {
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, .6);
        }
        /*每一个课程的显示*/
        .item {
            width: 100%;
            height: 140px;
            background-size: cover;
            background-repeat: no-repeat;
            margin-bottom: 10px;
            position: relative;
        }
        .item .text {
            position: absolute;
            top: 20%;
            left: 5%;
            /*-webkit-transform: translate(-50%);*/
        }
        .item .title {
            font-size: 25px;
            border-bottom: 1px solid #fdb811;
            line-height: 45px;
            color: #fdb811;
            margin-bottom: 20px;
        }
        .item .middle {
            width: 100%;
            font-size: 16px;
            line-height: 30px;
            color: #fdb811;
        }
        /*没有课程的界面的显示状态*/
        .noCourse {
            font-size: 16px;
            line-height: 30px;
            position: absolute;
            top: 35%;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            color: #fdb811;
            text-align: center;
            border-bottom: 1px solid rgba(253, 184, 17, .3);
        }
        .upNow {
            position: fixed;
            bottom: 15%;
            right: 5%;
            display: none;
        }
        .upNow p {
            color: #ccc;
            padding-top: 0.3rem;
        }
        .upNow .item-upNow {
            width: auto;
        }
        .upNow .wrapper {
            height: 46px;
            width: 46px;
            border-radius: 50%;
            background-origin: border-box;
            position: relative;
            top: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
            background-image: radial-gradient(circle at center, transparent 0%, transparent 40%, #00BA9B 100%);
        }
        .upNow .wrapper .img {
            width: 26px;
            height: 22px;
            position: absolute;
            background-repeat: no-repeat;
            background-size: cover;
            left: 50%;
            top: 50%;
            margin-left: -13px;
            margin-top: -10px;
        }
    }
</style>